<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="wap-font-scale" content="no">
<meta name="renderer" content="webkit">
<title>AutoCode</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/links/jquery/jquery-3.5.1.min.js"></script>
<script src="/links/polyfill.min.js"></script>
<script src="/links/axios/axios.min.js"></script>
<script src="/links/vue/vue.min.js"></script>
<script src="/links/element-ui/index.js"></script>
<script src="/links/dayjs.min.js"></script>
<script src="/links/echarts/echarts.js"></script>
<script src="/links/JsBarcode.all.js"></script>
<script src="/links/qrcode.min.js"></script>
<script src="/links/layer/layer.js"></script>
<script src="/links/crypto/crypto-js.js"></script>
<script src="/js/dragController.js"></script>
<script src="/js/HttpApi.js"></script>
<script src="/js/AutoCode.js"></script>
<link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
<link href="/css/default.css" rel="stylesheet"/>
<link href="/css/dragController.css" rel="stylesheet"/>
    
    <style>
        
    </style>
</head>
<body>
<div id="app"  class="box " >
<div class="left " style="width:400px;">
<div class="flex ac-tree-head ac-tree-head-default-line">
    <div class="ac-tree-title">{{sysOrganTree.title}}</div>
    <div class="ac-tree-oper">
        
    </div>
</div>
<div style="padding:5px 10px;">
    <el-input size="mini" placeholder="输入关键字进行过滤" v-model="sysOrganTree.filterValue"></el-input>
</div>
<div class="ac-tree-content2">
    <el-tree ref="sysOrganTree" :data="sysOrganTree.data"
    :expand-on-click-node="false" node-key="id" empty-text="内容为空"
    highlight-current :current-node-key="sysOrganTree.currentNodeKey"  
       
    :filter-node-method="sysOrganTree_filterNodeMethod"
      
       
    
    @current-change="sysOrganTree_currentChange"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>
        <i v-if="data.children && data.children.length>0" class="el-icon-folder"></i>
        <i v-else class="el-icon-document"></i>
        {{ data.label }}
    </span>
</span>
</el-tree>

</div>
</div>
<div class="resize"></div>
<div class="right " style="width:calc(100% - 402px);">
<el-tabs type="border-card" v-model="page.tabs" class=""  >
<el-tab-pane class="" label="PC端授权" name="tab1" :disabled="tabDisabled.tab1" v-if="tabVisible.tab1" >
<div class="flex ac-tree-head ac-tree-head-default-line">
    <div class="ac-tree-title"></div>
    <div class="ac-tree-oper">
        <el-button size="medium"  v-if="organMenus.operVisible.C==undefined || organMenus.operVisible.C" @click="organMenus_saveOrganMenus()" :disabled="organMenus.operDisabled.C"  type="text"     native-type="button">保存</el-button>

    </div>
</div>
<div style="padding:5px 10px;">
    <el-input size="mini" placeholder="输入关键字进行过滤" v-model="organMenus.filterValue"></el-input>
</div>
<div class="ac-tree-content2">
    <el-tree ref="organMenus" :data="organMenus.data"
    :expand-on-click-node="false" node-key="id" empty-text="内容为空"
    highlight-current :current-node-key="organMenus.currentNodeKey"  
    show-checkbox  :default-checked-keys="organMenus.defaultCheckedKeys" 
    :filter-node-method="organMenus_filterNodeMethod"
      
       
    @check="organMenus_check"
    @current-change="organMenus_currentChange"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>
        <i v-if="data.children && data.children.length>0" class="el-icon-folder"></i>
        <i v-else class="el-icon-document"></i>
        {{ data.name }}
    </span>
    <span>

    </span>
</span>
</el-tree>

</div>
</el-tab-pane>
<el-tab-pane class="" label="APP端授权" name="tab2" :disabled="tabDisabled.tab2" v-if="tabVisible.tab2" >
<div class="flex ac-tree-head ac-tree-head-default-line">
    <div class="ac-tree-title"></div>
    <div class="ac-tree-oper">
        <el-button size="medium"  v-if="appOrganMenus.operVisible.C==undefined || appOrganMenus.operVisible.C" @click="appOrganMenus_saveOrganMenus()" :disabled="appOrganMenus.operDisabled.C"  type="text"     native-type="button">保存</el-button>

    </div>
</div>
<div style="padding:5px 10px;">
    <el-input size="mini" placeholder="输入关键字进行过滤" v-model="appOrganMenus.filterValue"></el-input>
</div>
<div class="ac-tree-content2">
    <el-tree ref="appOrganMenus" :data="appOrganMenus.data"
    :expand-on-click-node="false" node-key="id" empty-text="内容为空"
    highlight-current :current-node-key="appOrganMenus.currentNodeKey"  
    show-checkbox  :default-checked-keys="appOrganMenus.defaultCheckedKeys" 
    :filter-node-method="appOrganMenus_filterNodeMethod"
      
       
    @check="appOrganMenus_check"
    @current-change="appOrganMenus_currentChange"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>
        <i v-if="data.children && data.children.length>0" class="el-icon-folder"></i>
        <i v-else class="el-icon-document"></i>
        {{ data.name }}
    </span>
    <span>

    </span>
</span>
</el-tree>

</div>
</el-tab-pane>

</el-tabs>

</div>



</div>

</body>
<script th:inline="javascript">
    let vm = new Vue({
            el: '#app',
            data() {
                return {"sysOrganTree":{"title":"组织机构","data":[],"filterValue":"","defaultCheckedKeys":[],"currentNodeKey":{},"operData":{},"operVisible":{},"operDisabled":{},"currentRow":{}},"organMenus":{"title":"授权菜单","data":[],"filterValue":"","defaultCheckedKeys":[],"currentNodeKey":{},"operData":{"C":""},"operVisible":{},"operDisabled":{},"currentRow":{}},"appOrganMenus":{"title":"APP端授权","data":[],"filterValue":"","defaultCheckedKeys":[],"currentNodeKey":{},"operData":{"C":""},"operVisible":{},"operDisabled":{},"currentRow":{}},"page":{"tabs":"tab1"},"tabDisabled":{"tab1":false,"tab2":false},"tabVisible":{"tab1":true,"tab2":true},"customOptions":{},"dictOptions":{}}
            },
            watch: {
"sysOrganTree.filterValue":function(val){
	this.$refs.sysOrganTree.filter(val);
},
"organMenus.filterValue":function(val){
	this.$refs.organMenus.filter(val);
},
"appOrganMenus.filterValue":function(val){
	this.$refs.appOrganMenus.filter(val);
}},
            methods: {
organMenus_check:function(node,list){
        
},
sysOrganTree_nodeClick:function(data,node){
    this.sysOrganTree.currentNodeKey=data.id;
},
sysOrganTree_allowDrop:function(draggingNode, dropNode, type){
    /*拖拽时判定目标节点能否被放置。
    type ：'prev'、'inner' 和 'next'，
    分别表示放置在目标节点前、插入至目标节点和放置在目标节点后*/
},
appOrganMenus_check:function(node,list){
        
},
sysOrganTree_nodeDrop:function(draggingNode, dropNode, dropType, ev){
	let that = this;
	/*共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、
	    被拖拽节点的放置位置（before、after、inner）、event	*/
	
},
sysOrganTree_checkChange:function(data, checked, indeterminate) {
    console.log(data, checked, indeterminate);
},
appOrganMenus_load:function() {
    let that = this;
    HttpApi.queryDs("platformMenu.appOrganMenusTree", that.appOrganMenus.operData, function(res) {
        that.$set(that.appOrganMenus, "data", res.data);
        that.$set(that.appOrganMenus, "defaultCheckedKeys", res.defaultCheckedKeys);
    });
},
sysOrganTree_check:function(node,list){
        
},
sysOrganTree_treeCommand:function(param){
    let that = this;
    if(param.flag=="addChildren"){
        let dialogParam = {};
        dialogParam.parentId=param.nodeData.id;
        /*添加子节点执行的函数
        that.{dialogCode}_dialogOpen(dialogParam,function(dailogData){
            HttpApi.saveProvider("sysOrganTree",dailogData,function(res){
                if(res.parentId=="-1"){
                    that.sysOrganTree.data.push(res);
                }else{
                    that.$refs.sysOrganTree.append(res,res.parentId);
                }
                that.{dialogCode}.visible = false;
            });
        })
        */
    }
    if(param.flag=="del"){
        HttpApi.delProviderConfirm("sysOrgan",param.nodeData,function(res){
            that.$refs.sysOrganTree.remove(param.nodeData);
            that.sysOrganTree_currentChange();
        });
    }
},
appOrganMenus_allowDrop:function(draggingNode, dropNode, type){
    /*拖拽时判定目标节点能否被放置。
    type ：'prev'、'inner' 和 'next'，
    分别表示放置在目标节点前、插入至目标节点和放置在目标节点后*/
},
organMenus_allowDrop:function(draggingNode, dropNode, type){
    /*拖拽时判定目标节点能否被放置。
    type ：'prev'、'inner' 和 'next'，
    分别表示放置在目标节点前、插入至目标节点和放置在目标节点后*/
},
appOrganMenus_saveOrganMenus:function() {
    let that = this;
    let checkedKeys = this.$refs.appOrganMenus.getCheckedKeys();
    let param = {};
    param.checkedKeys = checkedKeys;
    param.orgCode = this.appOrganMenus.operData.orgCode;
    HttpApi.post("/platform/menus/saveAppOrganMenus", param, function(res) {
        //请补充方法执行成功后要做的操作
        that.$message.success("保存成功");
    })
},
sysOrganTree_load:function(){
    let that = this;
    HttpApi.queryTree("sysOrgan",that.sysOrganTree.operData,function(treeData){
        that.$set(that.sysOrganTree,"data",treeData);
        if (treeData.length > 0) {
            that.$nextTick(function() {
                that.$refs.sysOrganTree.setCurrentKey(treeData[0].id);
                that.sysOrganTree_currentChange(treeData[0]);
            });
        } else {
                that.sysOrganTree_currentChange();
        }
    });
},
organMenus_treeCommand:function(param){
    let that = this;
    if(param.flag=="addChildren"){
        let dialogParam = {};
        dialogParam.parentId=param.nodeData.id;
        /*添加子节点执行的函数
        that.{dialogCode}_dialogOpen(dialogParam,function(dailogData){
            HttpApi.saveProvider("organMenus",dailogData,function(res){
                if(res.parentId=="-1"){
                    that.organMenus.data.push(res);
                }else{
                    that.$refs.organMenus.append(res,res.parentId);
                }
                that.{dialogCode}.visible = false;
            });
        })
        */
    }
    if(param.flag=="del"){
        HttpApi.delProviderConfirm("sysOrganMenu",param.nodeData,function(res){
            that.$refs.organMenus.remove(param.nodeData);
            that.organMenus_currentChange();
        });
    }
},
organMenus_checkChange:function(data, checked, indeterminate) {
    console.log(data, checked, indeterminate);
},
sysOrganTree_filterNodeMethod:function(value, data){
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
},
organMenus_allowDrag:function(node){
    return true;
},
appOrganMenus_allowDrag:function(node){
    return true;
},
organMenus_nodeDrop:function(draggingNode, dropNode, dropType, ev){
	let that = this;
	/*共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、
	    被拖拽节点的放置位置（before、after、inner）、event	*/
	
},
appOrganMenus_filterNodeMethod:function(value, data){
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
},
organMenus_load:function() {
    let that = this;
    HttpApi.queryDs("platformMenu.organMenusTree", that.organMenus.operData, function(res) {
        that.$set(that.organMenus, "data", res.data);
        that.$set(that.organMenus, "defaultCheckedKeys", res.defaultCheckedKeys);
    });
},
appOrganMenus_nodeDrop:function(draggingNode, dropNode, dropType, ev){
	let that = this;
	/*共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、
	    被拖拽节点的放置位置（before、after、inner）、event	*/
	
},
sysOrganTree_currentChange: function(data,node){
    if(data){
        this.sysOrganTree.currentNodeKey=data.id;
        this.sysOrganTree.currentRow = data;
            this.appOrganMenus.operData.orgCode=data.code;

this.appOrganMenus_load();
    this.organMenus.operData.orgCode=data.code;

this.organMenus_load();

    }else{
        this.$data.sysOrganTree.currentNodeKey=this.$options.data().sysOrganTree.currentNodeKey;
        this.$data.sysOrganTree.currentRow = this.$options.data().sysOrganTree.currentRow;
        this.$data.appOrganMenus.operData=this.$options.data().appOrganMenus.operData;
this.$data.appOrganMenus.data=this.$options.data().appOrganMenus.data;
this.$data.organMenus.operData=this.$options.data().organMenus.operData;
this.$data.organMenus.data=this.$options.data().organMenus.data;

    }
},
organMenus_currentChange: function(data,node){
    if(data){
        this.organMenus.currentNodeKey=data.id;
        this.organMenus.currentRow = data;
    }else{
        this.$data.organMenus.currentNodeKey=this.$options.data().organMenus.currentNodeKey;
        this.$data.organMenus.currentRow = this.$options.data().organMenus.currentRow;
    }
    
 },
appOrganMenus_checkChange:function(data, checked, indeterminate) {
    console.log(data, checked, indeterminate);
},
appOrganMenus_treeCommand:function(param){
    let that = this;
    if(param.flag=="addChildren"){
        let dialogParam = {};
        dialogParam.parentId=param.nodeData.id;
        /*添加子节点执行的函数
        that.{dialogCode}_dialogOpen(dialogParam,function(dailogData){
            HttpApi.saveProvider("organMenus",dailogData,function(res){
                if(res.parentId=="-1"){
                    that.appOrganMenus.data.push(res);
                }else{
                    that.$refs.appOrganMenus.append(res,res.parentId);
                }
                that.{dialogCode}.visible = false;
            });
        })
        */
    }
    if(param.flag=="del"){
        HttpApi.delProviderConfirm("sysOrganMenu",param.nodeData,function(res){
            that.$refs.appOrganMenus.remove(param.nodeData);
            that.appOrganMenus_currentChange();
        });
    }
},
sysOrganTree_allowDrag:function(node){
    return true;
},
appOrganMenus_currentChange: function(data,node){
    if(data){
        this.appOrganMenus.currentNodeKey=data.id;
        this.appOrganMenus.currentRow = data;
    }else{
        this.$data.appOrganMenus.currentNodeKey=this.$options.data().appOrganMenus.currentNodeKey;
        this.$data.appOrganMenus.currentRow = this.$options.data().appOrganMenus.currentRow;
    }
    
 },
organMenus_filterNodeMethod:function(value, data){
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
},
organMenus_saveOrganMenus:function() {
    let that = this;
    let checkedKeys = this.$refs.organMenus.getCheckedKeys();
    let param = {};
    param.checkedKeys = checkedKeys;
    param.orgCode = this.organMenus.operData.orgCode;
    HttpApi.post("/platform/menus/saveOrganMenus", param, function(res) {
        //请补充方法执行成功后要做的操作
        that.$message.success("保存成功");
    })
},
organMenus_nodeClick:function(data,node){
    this.organMenus.currentNodeKey=data.id;
},
appOrganMenus_nodeClick:function(data,node){
    this.appOrganMenus.currentNodeKey=data.id;
}
},
            mounted: function(){
    dragControllerLR();
    dragControllerUD();
},
            created: function(){
    let that=this;
    //获取字典信息
    HttpApi.dictOptions([],function(res){
        that.dictOptions=res;
    });

    //加载自定义数据字典
    

    //加载初始化load
    this.sysOrganTree_load();


    //加载初始化方法
    
}
    });
    

    
</script>
</html>
